axios.defaults.baseURL = 'http://ajax-api.itheima.net'
const list = document.querySelector('.top');

 const fn = async () =>{
 const {data:res} = await axios.get('/api/category/top')

 const newArr = res.data.map((item) =>{
  return axios.get('/api/category/sub?id=' + item.id)
 })

 const str = await Promise.all(newArr)

 list.innerHTML = str.map(({data:item}) =>{
      return `<li>
      <a href="javascript:;">${item.data.name}</a>
      <ul class="sub">
        ${
          item.data.children.map(item =>{
            return ` <li>
          <a href="javascript:;">
            <span>${item.name}</span>
            <img src="${item.picture}" alt="">
          </a>
        </li>`
          }).join('')
        }
      </ul>
    </li>`
    }).join('')
 }
 fn()  